<template>
	<div class="tangshi">
		<view class="top" v-if="top" @tap="backtop">
			<img src="../../static/top.png" alt="" />
		</view>
		<search @searchFn="searchFn"></search>
		<view class="hot_poetry hot_author">
			<div class="poetry" v-for="(item,index) in shiciList" :key="index" @click="poetrydetail(item)">
				<div class="title">{{item.title}}</div>
				<p class="author">{{item.author}}</p>
				<div class="content" v-html="item.content">
					
				</div>
			</div>
		
		</view>
			<div class="more"><p>{{moreText}}</p></div>
	</div>
</template>

<script>
	import search from '../../components/search.vue'
	
	export default{
		components:{
			search
		},
		data(){
			return{
				pageNum:0,
				shiciList:[],
				moreText:'加载中',
				top:false,
				content:""
			}
		},
		onShareAppMessage(res) {
				wx.showShareMenu({
				     withShareTicket: true,
				     menus: ['shareAppMessage', 'shareTimeline']
				    })
				return{
						title:"一起来学古诗词吧",
						imageUrl:'https://www.leedong.top/img/11556.png'
				}
				
				},
				//2.分享到朋友圈
		onShareTimeline(){
		
			return {
				title: '一起来学古诗词吧',
					imageUrl:'https://www.leedong.top/img/11556.png'
				
			}
		},
		onReachBottom(){
			this.top=true
			this.tangchaolist()
		},
		onLoad() {
			this.tangchaolist()
		},
		methods:{
			searchFn(content){
				this.shiciList=[]
				this.content=content;
				this.pageNum=0;
				this.moreText=""
				this.tangchaolist()
				
			},
			poetrydetail(t){
				uni.navigateTo({
					url:'/pages/poetrydetail/index?title='+JSON.stringify(t)
				})
			},
			async tangchaolist() {
				this.pageNum+=1;
				const data = await this.$api.yuanchao({
					types: 'shi',
					pageNumber: this.pageNum,
					pageSize: 20,
					content:this.content
				});
				let totalPage = Math.ceil(data.total / 10);
				if (this.pageNum > totalPage) {
					this.moreText = '已加载全部'
					return;
				}
			   this.shiciList = this.shiciList.concat(data.rows).reverse()
				
			
			},
			backtop(){
				uni.pageScrollTo({
				                    scrollTop: 0,
				                    duration: 100,
				                });
			},
			onPageScroll(e) { //根据距离顶部距离是否显示回到顶部按钮
			                if (e.scrollTop > 100) { //当距离大于10时显示回到顶部按钮
			                    this.top = true
			                } else {
			                    this.top = false
			                }
			            }
		}
	}
</script>

<style lang="scss">
	.tangshi{
		.top{
			position: fixed;
			bottom: 20px;
			right: 5px;
			z-index: 1000;
			img{
				width: 32px;
				height: 32px;
			}
		}
		.hot_poetry{
			.poetry{
				text-align: center;
				background: #f0efe3;
				width: 100%;
				border-bottom: 1px solid #d2d0bb;
				padding-top: 20rpx;
				.title{
					
				}
				.author{
					font-size: 13px;
					color: #9a8383;
					padding: 10px;
				}
				.content{
					font-size: 14px;
					padding-bottom: 20px;
					
				}
			}
		}
		.more{
			
			p{
				text-align: center;
				font-size: 13px;
				color: cadetblue;
			}
		}
	}
</style>